import React, {memo, ReactElement} from 'react';
import UnitBoxStyle from "./UnitBoxStyle";
import {DictData} from "../../../interface/SysDictDataInterface";

/**
 * 时间 2024年1月4日 10点21分
 * 关于单元盒子组件的说明
 * 单元盒子组件的逻辑和代码量还是比较庞大的
 * 主要用于首页中不同模块的展示，具体展示效果不再赘述了
 * 在UnitBox中是有插槽的，而插槽也是其主体部分
 *
 *
 * props说明：
 *  title: 单元标题
 *  color: 标题字体颜色，默认为黑色
 *  isCenter: 是否居中 默认为居中
 *  navbarList: 盒子导航栏，其传入的是一个对象
 *  isShowLine: 是否显示标题旁边的两条线
 *  size: 尺寸大小,
 *    要求改变标题字体大小
 *    标题两边的线条宽度3333
 *
 *
 */
type Props = {
  size?:number,
  title?:String,
  color?:String,
  isLeft?:boolean,
  /** 盒子导航栏，其传入的是一个字典对象 */
  navbarList?:Array<DictData>,
  backgroundColor?:String,
  isShowLine?:boolean,
  sysDictDataIndex?:number,
  navBarClick?:Function,
  children:ReactElement,
};

export default memo(function UnitBox(props:Props) {
  //菜单导航栏单击事件
  function navbarLiBtn(data:DictData) {
    if (props.navBarClick){
      props.navBarClick(data);
    }
  }

  return (
    <UnitBoxStyle
      $size={props.size}
      $backgroundColor={props.backgroundColor}
      $isShowLine={props.isShowLine}
      $color={props.color}
      $isLeft={props.isLeft}
    >

      <div className="unit-box-title-box">
        <div className="unit-box-line left-line"></div>
        <div className="unit-box-title">{props.title?props.title:""}</div>
        <div className="unit-box-line right-line"></div>

      </div>
      <ul className={props.navbarList?"unit-box-navbar-ul":"public-display-none"}>
        {props.navbarList?.map((item)=>{
          return (
            <li key={item.sysDictDataId}
                className="unit-box-navbar-li"
                onClick={()=>{navbarLiBtn(item)}}
            >
              {item.dictLabel}
            </li>
          );
        })}
      </ul>
      <div className="unit-box-content">
        {props.children}
      </div>
    </UnitBoxStyle>
  );
});
